<template>
	<ssq v-if="ssqShow" @handlerCancel="cancelSsq" @handlerConfirm="confirmSsq"></ssq>
	<view class="form">
		<view class="item">
			<view class="label">
				姓名：
			</view>
			<input type="text" placeholder="请输入姓名" v-model="data.name"/>
		</view>
		<view class="item">
			<view class="label">
				手机号：
			</view>
			<input type="text" placeholder="请输入手机号" v-model="data.phone"/>
		</view>
		<view class="item">
			<view class="label">
				省市区：
			</view>
			<view :style="data.ssq=='请选择省市区'?'color:rgb(133,133,133)':''" @click="selectSsq">
				{{data.ssq}}
			</view>
			<!-- <input type="text" placeholder="请输入地址" v-model="data.address"/> -->
		</view>
		<view class="item">
			<view class="label">
				详细地址：
			</view>
			<textarea  placeholder="请输入详细地址" v-model="data.address" style="width:400rpx;height:150rpx;"/>
		</view>
		<radio-group @change="radioChange" @click="radioChange">
			<view style="display: flex;align-items: center;">
				<radio :value="data.defaultAddress" :checked="data.defaultAddress"/>设为默认地址
			</view>
		</radio-group>
		<view class="commit" @click="commit">
			确认提交
		</view>
		<view style="height:2rpx;">
			
		</view>
	</view>
	
</template>

<script setup>
	import {ref} from 'vue'
	import http from '../components/http.js'
	import ssq from '../components/ssq.vue'
	import {onLoad} from '@dcloudio/uni-app'
	const data = ref({ssq:'请选择省市区',defaultAddress:0})
	const haveId = ref(false)
	const id = ref(undefined)
	onLoad((options)=>{
		if(options.id){
			haveId.value = true
			id.value = options.id
			http.http({url:'/address/queryById?id='+id.value,method:'GET'}).then(res=>{
				data.value = res.data.data[0]
				// console.log(data.value,'data.value')
			})
		}else{
			haveId.value = false
		}
	})
	const ssqShow = ref(false)
	function commit(){
		// console.log('com')
		if(haveId.value){
			let udata = data.value
			udata.id = id.value
			http.http({url:'/address/update',method:'POST',data:udata}).then(res=>{
				uni.navigateTo({
					url:'address'
				})
			})
		}else{
			http.http({url:'/address/add',method:'POST',data:data.value}).then(res=>{
				uni.navigateTo({
					url:'address'
				})
			})
		}
		
	}
	function selectSsq(){
		ssqShow.value = true
	}
	function cancelSsq(){
		ssqShow.value = false
	}
	function confirmSsq(e){
		ssqShow.value = false
		data.value.ssq = e[0]+e[1]+e[2]
		console.log(e)
	}
	
	function radioChange(){
		data.value.defaultAddress = data.value.defaultAddress^1
	}
</script>

<style>
	page{
		background:#f8f8f8;
	}
	.form{
		width:690rpx;
		margin:20rpx auto 0 auto;
		padding-top:70rpx;
		background:#fff;
		border-radius:30rpx;
	}
	.item{
		display:flex;
		width:690rpx;
		padding:24rpx;
		
	}
	.label{
		width:160rpx;
		text-align:right;
	}
	.commit{
		width:600rpx;
		height:100rpx;
		margin:50rpx auto;
		background:red;
		color:#fff;
		line-height:100rpx;
		text-align:center;
		border-radius:30rpx;
	}
</style>